<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹出框</title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!--
			data-placement:出现的地方
			data-trigger="focus" 点击空白 消失
			data-toggle：这里貌似没用
			data-content：内容部分
			data-animation:渐变效果
		-->
		<div class="container">
			<button type="button" class="btn btn-default js-popover"
				data-placement="bottom" data-trigger="focus" data-animation="false"
				data-toggle="popover" title="标题" data-content="这里是内容区域">
				弹出框
			</button>
		</div>
		<script type="text/javascript">
			$(".js-popover").popover();/*点击就展示对话框*/
			$(".js-popover").popover("show");//一开始就展示
			$(".js-popover").on('hidden.bs.popover',function(){
				alert("hello");//消失时触发
			})
		</script>
	</body>
</html>
